<template>
  <div class="index-home">
    <div class="sss">
      <screen-full />
    </div>

    <div class="selectbox">
      <span>端口号</span>
      <el-select v-model="duankou" placeholder="请选择">
        <el-option
          v-for="item in duankouList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>波特率</span>
      <el-select v-model="bote" placeholder="请选择">
        <el-option
          v-for="item in boteList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="home-nav">
      <div class="nav" @click="chang1">
        <img src="../assets/img/index/xsmr.png" v-if="!isNav1" alt="" />
        <img src="../assets/img/index/xsxz.png" v-if="isNav1" alt="" />
      </div>
      <div class="nav" @click="chang2">
        <img src="../assets/img/index/bzmr.png" v-if="!isNav2" alt="" />
        <img src="../assets/img/index/bzxz.png" v-if="isNav2" alt="" />
      </div>
      <div class="nav" @click="chang3">
        <img src="../assets/img/index/kzmr.png" v-if="!isNav3" alt="" />
        <img src="../assets/img/index/kzxz.png" v-if="isNav3" alt="" />
      </div>
    </div>

    <Set v-if="goSet" />
    <Show v-if="goShow" />

    <Control v-if="goCon" />
  </div>
</template>

<script>
import ScreenFull from "../components/ScreenFull.vue";
import Show from "../components/Show.vue";
import Set from "../components/Set.vue";
// import Add from "../components/Add.vue";

import Control from "../components/Control.vue";
export default {
  name: "",
  data() {
    return {
      isNav1: true,
      isNav2: false,
      isNav3: false,
      goShow: true,
      goSet: false,
      goCon: false,
      duankou: "",
      bote: "",
      duankouList: [],
      boteList: [],
    };
  },
  components: {
    Show,
    Set,
    Control,
    ScreenFull,
    // Add,
  },
  mounted() {

  },
  methods: {
    chang1() {
      this.isNav1 = this.goShow = true;
      this.isNav2 = this.isNav3 = this.goSet = this.goCon = false;
    },
    chang2() {
      this.isNav1 = this.isNav3 = this.goCon = this.goShow = false;
      this.isNav2 = this.goSet = true;
    },
    chang3() {
      this.isNav2 = this.isNav1 = this.goSet = this.goShow = false;
      this.isNav3 = this.goCon = true;
    },
  },
};
</script>

<style scoped lang="less">
.index-home {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  background-image: url("../assets/img/index/bj.png");
  position: relative;

  .selectbox {
    position: absolute;
    width: 400px;
    height: 30px;
    top: 20px;
    left: 75%;
    span {
      font-size: 14px;
      color: #62b3e6;
      margin-right: 10px;
      margin-left: 20px;
    }
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner {
      background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));

      color: #fff;
      border: 0px;
      border-radius: 5px;
      text-align: center;
      width: 120px;
      height: 25px;
    }
    //修改的是el-input上下的⼩图标的颜⾊
    /deep/ .el-select .el-input .el-select__caret {
      color: #fff;
      // margin-top: 2px;
      // margin-right: 10px;
    }
    //修改单个的选项的样式
    // /deep/ .el-select-dropdown__item {
    //   background-color: transparent;
    //   color: #fff;
    // }
    //修改的是下拉框选项内容上⽅的尖⾓
    /deep/ .el-popper .popper__arrow,
    .el-popper .popper__arrow::after {
      display: none;
    }
    // 修改下拉框样式
    // /deep/ .el-select-dropdown {
    //   background-color: transparent !important;
    //   border: none;
    // }
    // 修改下拉框字体
    /deep/ .el-input__inner,
    .el-textarea__inner {
      font-size: 15px;
    }
    // 修改下拉箭头
    /deep/ .el-input__icon {
      height: 120%;
      line-height: 20px;
    }
    /deep/ .el-input__suffix {
      height: auto;
    }
  }
  .home-nav {
    width: 80px;
    height: 80vh;
    // background-color: red;
    margin-top: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .nav {
      width: 100%;
      height: 250px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // .bzset {
  //   flex: 1;
  // }
}
</style>
<style scoped lang="less">
@media screen and (max-width: 1300px) {
  .index-home {
    background-image: url("../assets/img/ipadbg.png");
    background-size: 100% 100%;
    background-color: #1d577c;
    height: 600px;
    .selectbox {
      width: 370px;
      left: 60%;
      top: 15px;
      span {
        font-size: 14px;
        margin-left: 8px;
        margin-right: 5px;
      }

     
    }
    .home-nav{
      width: 55px;
      margin-top: 100px;
      .nav{
        height: 145px;
      }
    }
  }
}
</style>

